<!-- 统计 -->
<template>
  <div class="statistic-container">
    <!-- 标题 -->
    <div class="statistic-title" />
    <!-- 月份选择器 -->
    <a-range-picker class="statistic-month-picker" :value="[startDay,endDay]" :allowClear="false" @change="onChange">
      <a-space>
        <div style="cursor:pointer">{{formatValueMoment}}</div>
      </a-space>
    </a-range-picker>


    <!-- 左轮播 排行 -->
    <div class="swiper-container" id="swiper-container-left">
      <div class="swiper-wrapper">
        <!-- 部门 投稿打分排行榜 -->
        <div class="rank-container swiper-slide">
          <!-- 排行榜 头部 -->
          <div class="rank-top bg-blue">
            <div class="top-text top-text-3"></div>
            <div class="top-title top-title1"></div>
          </div>
          <!-- 排行榜 数据 -->
          <div class="rank-center">
            <div class="rank-item" v-for="(item,index) in rank3List" :key="item.person_id">
              <div class="item-left">
                <div v-if="index === 0" class="item-avatar item-avatar-1-first"></div>
                <div v-else-if="index === 1" class="item-avatar item-avatar-1-second"></div>
                <div v-else-if="index === 2" class="item-avatar item-avatar-1-third"></div>
                <div v-else class="item-avatar item-avatar-1">
                  <div>{{++index}}</div>
                </div>
                <div class="item-detail">
                  <div class="item-name" style="transform:translateY(5px)">
                    {{item.department_name}}
                  </div>
                  <!-- <div class="item-department">
                    {{item.department_name}}
                  </div> -->
                </div>
              </div>
              <div class="item-right">
                {{item.total_score ? item.total_score : 0}}
              </div>
            </div>
            <a-empty class="rank-empty" v-show="rank3List.length === 0" />
          </div>
        </div>
        <!-- 个人 投稿打分排行榜 -->
        <div class="rank-container swiper-slide">
          <!-- 排行榜 头部 -->
          <div class="rank-top bg-blue">
            <div class="top-text top-text-1"></div>
            <div class="top-title top-title1"></div>
          </div>
          <!-- 排行榜 数据 -->
          <div class="rank-center">
            <div class="rank-item" v-for="(item,index) in rank1List" :key="item.person_id">
              <div class="item-left">
                <div v-if="index === 0" class="item-avatar item-avatar-1-first"></div>
                <div v-else-if="index === 1" class="item-avatar item-avatar-1-second"></div>
                <div v-else-if="index === 2" class="item-avatar item-avatar-1-third"></div>
                <div v-else class="item-avatar item-avatar-1">
                  <div>{{++index}}</div>
                </div>
                <div class="item-detail">
                  <div class="item-name">
                    {{item.person_name}}
                  </div>
                  <div class="item-department">
                    {{item.department_name}}
                  </div>
                </div>
              </div>
              <div class="item-right">
                {{item.total ? item.total.score : 0}}
              </div>
            </div>
            <a-empty class="rank-empty" v-show="rank1List.length === 0" />
          </div>
        </div>
        <!-- 项目组 投稿数量排行榜 -->
        <div class="rank-container swiper-slide">
          <!-- 排行榜 头部 -->
          <div class="rank-top bg-blue">
            <div class="top-text top-text-5"></div>
            <div class="top-title top-title1"></div>
          </div>
          <!-- 排行榜 数据 -->
          <div class="rank-center">
            <div class="rank-item" v-for="(item,index) in rank5List" :key="item.person_id">
              <div class="item-left">
                <div v-if="index === 0" class="item-avatar item-avatar-1-first"></div>
                <div v-else-if="index === 1" class="item-avatar item-avatar-1-second"></div>
                <div v-else-if="index === 2" class="item-avatar item-avatar-1-third"></div>
                <div v-else class="item-avatar item-avatar-1">
                  <div>{{++index}}</div>
                </div>
                <div class="item-detail">
                  <div class="item-name" style="transform:translateY(5px)">
                    {{item.project_group_name}}
                  </div>
                  <!-- <div class="item-department">
                    {{item.department_name}}
                  </div> -->
                </div>
              </div>
              <div class="item-right">
                {{item.total_score ? item.total_score : 0}}
              </div>
            </div>
            <a-empty class="rank-empty" v-show="rank5List.length === 0" />
          </div>
        </div>
      </div>
      <div class="swiper-pagination" id="swiper-pagination-left"></div>
    </div>

    <!-- 右轮播 排行 -->
    <div class="swiper-container" id="swiper-container-right">
      <div class="swiper-wrapper">

        <!-- 部门 投稿数量排行榜 -->
        <div class="rank-container swiper-slide">
          <!-- 排行榜 头部 -->
          <div class="rank-top bg-purple">
            <div class="top-text top-text-4"></div>
            <div class="top-title top-title2"></div>
          </div>
          <!-- 排行榜 数据 -->
          <div class="rank-center">
            <div class="rank-item" v-for="(item,index) in rank4List" :key="item.person_id">
              <div class="item-left">
                <div v-if="index === 0" class="item-avatar item-avatar-2-first"></div>
                <div v-else-if="index === 1" class="item-avatar item-avatar-2-second"></div>
                <div v-else-if="index === 2" class="item-avatar item-avatar-2-third"></div>
                <div v-else class="item-avatar item-avatar-1">
                  <div>{{++index}}</div>
                </div>
                <div class="item-detail">
                  <div class="item-name" style="transform:translateY(5px)">
                    {{item.department_name}}
                  </div>
                  <!-- <div class="item-department">
                    {{item.department_name}}
                  </div> -->
                </div>
              </div>
              <div class="item-right">
                {{item.total_count ? item.total_count : 0}}
              </div>
            </div>
            <a-empty class="rank-empty" v-show="rank4List.length === 0" />
          </div>
        </div>
        <!-- 个人 投稿数量排行榜 -->
        <div class="rank-container swiper-slide">
          <!-- 排行榜 头部 -->
          <div class="rank-top bg-purple">
            <div class="top-text top-text-2"></div>
            <div class="top-title top-title2"></div>
          </div>
          <!-- 排行榜 数据 -->
          <div class="rank-center">
            <div class="rank-item" v-for="(item,index) in rank2List" :key="item.person_id">
              <div class="item-left">
                <div v-if="index === 0" class="item-avatar item-avatar-2-first"></div>
                <div v-else-if="index === 1" class="item-avatar item-avatar-2-second"></div>
                <div v-else-if="index === 2" class="item-avatar item-avatar-2-third"></div>
                <div v-else class="item-avatar item-avatar-1">
                  <div>{{++index}}</div>
                </div>
                <div class="item-detail">
                  <div class="item-name">
                    {{item.person_name}}
                  </div>
                  <div class="item-department">
                    {{item.department_name}}
                  </div>
                </div>
              </div>
              <div class="item-right">
                {{item.total.count}}
              </div>
            </div>
            <a-empty class="rank-empty" v-show="rank2List.length === 0" />
          </div>
        </div>
        <!-- 项目组 投稿数量排行榜 -->
        <div class="rank-container swiper-slide">
          <!-- 排行榜 头部 -->
          <div class="rank-top bg-purple">
            <div class="top-text top-text-6"></div>
            <div class="top-title top-title2"></div>
          </div>
          <!-- 排行榜 数据 -->
          <div class="rank-center">
            <div class="rank-item" v-for="(item,index) in rank6List" :key="item.person_id">
              <div class="item-left">
                <div v-if="index === 0" class="item-avatar item-avatar-2-first"></div>
                <div v-else-if="index === 1" class="item-avatar item-avatar-2-second"></div>
                <div v-else-if="index === 2" class="item-avatar item-avatar-2-third"></div>
                <div v-else class="item-avatar item-avatar-1">
                  <div>{{++index}}</div>
                </div>
                <div class="item-detail">
                  <div class="item-name" style="transform:translateY(5px)">
                    {{item.project_group_name}}
                  </div>
                  <!-- <div class="item-department">
                    {{item.department_name}}
                  </div> -->
                </div>
              </div>
              <div class="item-right">
                {{item.total_count ? item.total_count : 0}}
              </div>
            </div>
            <a-empty class="rank-empty" v-show="rank6List.length === 0" />
          </div>
        </div>
      </div>
      <div class="swiper-pagination" id="swiper-pagination-right"></div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import {
    apiPersonGetAllContributionStats,
    apiGetAllContributionStatisticsByDepartment,
    apiGetAllContributionStatisticsByProjectGroup
  } from '@/api/featch'

  import swiper from '@/assets/js/swiper.min.js'

  export default {
    name: 'statistic',
    components: {},
    data() {
      return {
        // 第一天 格式化
        startDay: moment(moment().startOf('year').format('YYYY-MM-DD')),
        // 第二天 格式化
        endDay: moment(moment().endOf('year').format('YYYY-MM-DD')),
        // 个人 分数
        rank1List: [],
        // 个人 数量
        rank2List: [],
        // 部门 分数
        rank3List: [],
        // 部门 数量
        rank4List: [],
        // 项目组 分数
        rank5List: [],
        // 项目组 数量
        rank6List: [],
        flagInterval: null,
        // 循环时间   时   分   秒   毫秒
        timeInterval: 2 * 60 * 60 * 1000,
        swiperInstanceLeft: null,
        swiperInstanceRight: null,
      }
    },
    computed: {
      formatValueMoment() {
        return `${this.startDay.format('YYYY-MM-DD')} ~ ${this.endDay.format('YYYY-MM-DD')}`
      },
    },
    mounted() {
      // 获取数据
      this.handleGetData()
      this.flagInterval = setInterval(() => {
        this.handleGetData()
      }, this.timeInterval)

      this.swiperInstanceLeft = new Swiper('#swiper-container-left', {
        pagination: '#swiper-pagination-left',
        paginationClickable: true,
      })
      this.swiperInstanceRight = new Swiper('#swiper-container-right', {
        pagination: '#swiper-pagination-right',
        paginationClickable: true,
      })
    },
    beforeDestroy() {
      clearInterval(this.flagInterval)
    },
    methods: {
      // 月份改变的回调
      onChange(date, dateString) {
        console.log(date)
        this.startDay = date[0]
        this.endDay = date[1]
        // 获取数据
        this.handleGetData()
      },
      // 获取数据
      handleGetData() {
        // 个人 分数
        apiPersonGetAllContributionStats({
            start_date: this.startDay.format('YYYY-MM-DD'),
            end_date: this.endDay.format('YYYY-MM-DD'),
            approved_status: 1,
            order_by: 'score'
          })
          .then(res => {
            if (res.code === 200) {
              this.rank1List = res.data
            }
          })
        // 个人 数量
        apiPersonGetAllContributionStats({
            start_date: this.startDay.format('YYYY-MM-DD'),
            end_date: this.endDay.format('YYYY-MM-DD'),
            approved_status: 1,
            order_by: 'count'
          })
          .then(res => {
            if (res.code === 200) {
              this.rank2List = res.data
            }
          })
        // 部门 分数
        apiGetAllContributionStatisticsByDepartment({
            start_date: this.startDay.format('YYYY-MM-DD'),
            end_date: this.endDay.format('YYYY-MM-DD'),
            approved_status: 1,
            order_by: 'score'
          })
          .then(res => {
            if (res.code === 200) {
              this.rank3List = res.data
            }
          })
        // 部门 数量
        apiGetAllContributionStatisticsByDepartment({
            start_date: this.startDay.format('YYYY-MM-DD'),
            end_date: this.endDay.format('YYYY-MM-DD'),
            approved_status: 1,
            order_by: 'count'
          })
          .then(res => {
            if (res.code === 200) {
              this.rank4List = res.data
            }
          })
        // 项目组 分数
        apiGetAllContributionStatisticsByProjectGroup({
            start_date: this.startDay.format('YYYY-MM-DD'),
            end_date: this.endDay.format('YYYY-MM-DD'),
            approved_status: 1,
            order_by: 'score'
          })
          .then(res => {
            if (res.code === 200) {
              this.rank5List = res.data
            }
          })
        // 项目组 数量
        apiGetAllContributionStatisticsByProjectGroup({
            start_date: this.startDay.format('YYYY-MM-DD'),
            end_date: this.endDay.format('YYYY-MM-DD'),
            approved_status: 1,
            order_by: 'count'
          })
          .then(res => {
            if (res.code === 200) {
              this.rank6List = res.data
            }
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .statistic-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-image: url('../../assets/img/statistic/bkg.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .statistic-title {
      position: absolute;
      top: 2vh;
      right: 50%;
      transform: translateX(50%);
      width: 34vw;
      height: 6vh;
      // background: #f0f0f0;
      background-image: url('../../assets/img/statistic/title.png');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .statistic-month-picker {
      position: absolute;
      top: 2vh;
      right: 40px;
      font-family: 'DIGITAL';
      color: #fafafa;
      font-weight: bold;
      font-size: 32px;
    }

    .swiper-container {
      margin: 7vh 8vw 0 8vw;
      width: 30vw;
      height: 88vh;
      background: #f5f5f5;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      box-shadow:
        0.9px 0.9px 2.8px rgba(0, 0, 0, 0.15),
        7px 7px 22px rgba(0, 0, 0, 0.3);


      .rank-container {
        width: 30vw;
        height: 88vh;
        background: #f5f5f5;
        border-radius: 12px;
        display: flex;
        flex-direction: column;

        // overflow: hidden;
        .rank-top {
          position: relative;
          border-radius: 12px 12px 0 0;
          width: 100%;
          height: 8vh;
          color: #fafafa;

          .top-text {
            margin: 0 auto;
            height: 9vh;
            width: 16vw;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: contain;
          }

          .top-title {
            position: absolute;
            top: 2vh;
            left: 4vh;
            width: 4vh;
            height: 4vh;
            // background-image: url('../../assets/img/statistic/rank1-title.svg');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
          }

          .top-title1 {
            background-image: url('../../assets/img/statistic/rank1-title.svg');
          }

          .top-title2 {
            background-image: url('../../assets/img/statistic/rank2-title.svg');
          }
        }

        .bg-blue {
          background: linear-gradient(to right, #2f54eb, #1d39c4);
        }

        .bg-purple {
          background: linear-gradient(to right, #9254de, #722ed1);
        }

        // 标题
        .top-text-1 {
          background-image: url('../../assets/img/statistic/rank1.png');
        }

        .top-text-2 {
          background-image: url('../../assets/img/statistic/rank2.png');
        }

        .top-text-3 {
          background-image: url('../../assets/img/statistic/rank3.png');
        }

        .top-text-4 {
          background-image: url('../../assets/img/statistic/rank4.png');
        }

        .top-text-5 {
          background-image: url('../../assets/img/statistic/rank5.png');
        }

        .top-text-6 {
          background-image: url('../../assets/img/statistic/rank6.png');
        }


        .rank-center {
          height: 80vh;
          overflow-y: auto;

          .rank-item {
            height: 80px;
            border-bottom: 1px solid #d9d9d9;
            // border-bottom: 1px solid black;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 48px;

            .item-left {
              display: flex;

              .item-avatar {
                height: 48px;
                width: 48px;
                // background: #1d39c4;
                border-radius: 50%;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;


                div {
                  color: #f0f0f0;
                  font-family: 'DIGITAL';
                  font-weight: bold;
                  font-size: 32px;
                  line-height: 48px;
                  margin: 0 auto;
                  text-align: center;
                }
              }

              .item-avatar-1-first {
                background-image: url('../../assets/img/statistic/first-crown.svg');
              }

              .item-avatar-1-second {
                background-image: url('../../assets/img/statistic/second-crown.svg');
              }

              .item-avatar-1-third {
                background-image: url('../../assets/img/statistic/third-crown.svg');
              }

              .item-avatar-1 {
                background: #597ef7;
              }

              .item-avatar-2-first {
                background-image: url('../../assets/img/statistic/first-banner.svg');
              }

              .item-avatar-2-second {
                background-image: url('../../assets/img/statistic/second-banner.svg');
              }

              .item-avatar-2-third {
                background-image: url('../../assets/img/statistic/third-banner.svg');
              }

              .item-avatar-2 {
                background: #722ed1;
              }

              .item-detail {
                margin-left: 32px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 48px;

                .item-name {
                  font-weight: bold;
                  font-size: 24px;
                  line-height: 32px;
                  color: #262626;
                }

                .item-department {
                  font-size: 16px;
                  line-height: 16px;
                  color: #595959;
                }
              }
            }

            .item-right {
              font-family: 'DIGITAL';
              font-weight: bold;
              color: #262626;
              font-size: 48px;
            }
          }
        }

        .rank-empty {
          margin-top: 20vh;
        }

      }

    }
  }
</style>